<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>ios11.1.2的iphoneX下输入框被遮盖</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            header, footer, main {
                display: block;

            }

            header {
                position: fixed;
                height: 50px;
                font-size: 20px;
                left: 0;
                right: 0;
                top: 0;
            }

            footer {
                  /* position: fixed; */  /* ios11.1.2的iphoneX下输入框被遮盖 */
                 position: absolute;  /* ios11.1.2的iphoneX下输入框被遮盖 */
                z-index: 1;
                height: 34px;
                width: 100%;
                font-size: 20px;
                left: 0;
                right: 0;
                bottom: 0;
            }

            main {
                /* main绝对定位，进行内部滚动 */
                position: absolute;
                top: 50px;
                bottom: 34px;
                /* 使之可以滚动 */
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }

            main .content {
                height: 2000px;
            }
            ul{
                list-style:none;
                margin: 0;
                padding: 0;
            }
            li{
                height: 30px;
                line-height: 30px;
                font-size: 12px;
                border-bottom:1px solid gray;
            }
            html,body{
                height: 100%;
            }
            .box-tip{

                position: absolute;
                display: table;
                display: none;
                height: 100%;
                width: 100%;
                /* position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin:auto; */
            }
            .tip-wrapper{
                display:table-cell;
                text-align: center;
                vertical-align: middle;
                /*position: absolute;
                top: 50%;
                left: 50%;
                transform:translate3d(50%,50%,0);*/
                /* padding: 10px;
                min-width:3rem;
                max-width:6rem;
                min-height:20px;
                line-height: 20px;
                font-size: 12px;
                color:#fff;
                text-align: center;
                border:1px solid #ccc;
                background-color: #fc0; */
            }
            .tip-body{
                padding: 10px;
                min-width:3rem;
                max-width:6rem;
                min-height:60px;
                line-height: 20px;
                margin:0 auto;
                font-size: 12px;
                color:#fff;
                white-space: normal;
                word-break: break-all; /* 解决字母，数字不换行的问题 */
                text-align: center;
                border:1px solid #ccc;
                background-color: #fc0;
            }
        </style>
    </head>
    <body class="layout-scroll-fixed">
        <!-- fixed定位的头部 -->
        <header>
            我是fixed布局的头部
        </header>
        
        <!-- 可以滚动的区域 -->
        <main>
            <div class="content">
            <!-- 内容在这里... -->
            <ul>
                <li>第1</li>
                <li>第2</li>
                <li>第3</li>
                <li>第4</li>
                <li>第5</li>
                <li>第6</li>
                <li>第7</li>
                <li>第8</li>
                <li>第9</li>
                <li>第10</li>
                <li>第11</li>
                <li>第12</li>
                <li>第13</li>
                <li>第14</li>
                <li>第15</li>
                <li>第16</li>
                <li>第17</li>
                <li>第18</li>
                <li>第19</li>
                <li>第20</li>
                <li>第21</li>
                <li>第22</li>
                <li>第23</li>
                <li>第24</li>
                <li>第25</li>
                <li>第26</li>
                <li>第27</li>
                <li>第28</li>
                <li>第29</li>
                <li>第30</li>
                <li>第31</li>
                <li>第32</li>
                <li>第33</li>
                <li>第34</li>
                <li>第35</li>
                <li>第36</li>
                <li>第37</li>
                <li>第38</li>
                <li>第39</li>
                <li>第40</li>
                <li>第41</li>
                <li>第42</li>
                <li>第43</li>
                <li>第44</li>
                <li>第45</li>
                <li>第46</li>
                <li>第47</li>
                <li>第48</li>
                <li>第49</li>
                <li>第50</li>
                <li>第51</li>
                <li>第52</li>
                <li>第53</li>
                <li>第54</li>
                <li>第55</li>
                <li>第56</li>
                <li>第57</li>
                <li>第58</li>
                <li>第59</li>
                <li>第60</li>
                <li>第61</li>
                <li>第62</li>
                <li>第63</li>
                <li>第64</li>
                <li>第65</li>
                <li>第66</li>
                <li>第67</li>
                <li>第68</li>
                <li>第69</li>
                <li>第70</li>
                <li>第71</li>
                <li>第72</li>
                <li>第73</li>
                <li>第74</li>
                <li>第75</li>
                <li>第76</li>
                <li>第77</li>
                <li>第78</li>
                <li>第79</li>
                <li>第80</li>
                <li>第81</li>
                <li>第82</li>
                <li>第83</li>
                <li>第84</li>
                <li>第85</li>
                <li>第86</li>
                <li>第87</li>
                <li>第88</li>
                <li>第89</li>
                <li>第90</li>
                <li>第91</li>
                <li>第92</li>
                <li>第93</li>
                <li>第94</li>
                <li>第95</li>
                <li>第96</li>
                <li>第97</li>
                <li>第98</li>
                <li>第99</li>
                <li>第100</li>
            </ul>
            </div>
        </main>
        
        <!-- fixed定位的底部 -->
        <!-- <footer>
            fixed定位的底部
        </footer> -->
        <footer>
            <input type="text" id="inputEle" placeholder="Footer..."/>
            <button class="submit">提交</button>
        </footer>
        <!-- <div class="footer">
            <input type="text" id="inputEle" placeholder="Footer..."/>
            <button class="submit">提交</button>
        </div> -->
        <div id="box-tip" class="box-tip">
            <div class="tip-wrapper">
                <div class="tip-header"></div>
                <div class="tip-body" id="tipInfo"></div>
                <div class="tip-footer"></div>
            </div>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var $inputEle = $('#inputEle');
            var $footer = $('footer');
            var $boxTip = $('#box-tip');
            var $tipInfo = $('#tipInfo');
            var inputEle = document.getElementById('inputEle');
            let Width = window.innerWidth,
                Height = window.innerHeight;
            var str = 'scrollTop:'+document.body.scrollTop+';innerHeight'+window.innerHeight+';scrollHeight:'+document.body.scrollHeight;
            alert(str);
            //判断元素是否在可视区域，不在的话返回true, 在返回false
            function notInView() {
                // getBoundingClientRect 是获取定位的，很怪异, (iphone 6s 10.0 bate版表现特殊)
                // top: 元素顶部到窗口（可是区域）顶部
                // bottom: 元素底部到窗口顶部
                // left: 元素左侧到窗口左侧
                // right: 元素右侧到窗口左侧
                // width/height 元素宽高
                   let bottom = $footer.get(0).getBoundingClientRect().bottom;
               // alert('bottom:'+bottom+';innerHeight'+window.innerHeight)
                   // 可视区域高度 - 元素底部到窗口顶部的高度 < 0, 则说明被键盘挡住了
                if (window.innerHeight - bottom < 0) {
                    return true
                }
                return false
            }
            $inputEle.focus(function(){
                interval = setInterval(function () { // 设置一个计时器，时间设置与软键盘弹出所需时间相近
                    document.body.scrollTop = document.body.scrollHeight;// 获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
                }, 100);
                setTimeout(function(){
                    clearInterval(interval);
                },600);
                // $tipInfo.text('scrollHeight').parent().parent().show();
                // 一下代码不能解决ios输入框被遮住的问题
                // if (Width != 750) {
                //     let bottomAdjust = (Height - window.innerHeight - 88 + 38) + 'px'
                //     // alert('bottomAdjust:'+bottomAdjust)
                //     $footer.css('bottom', bottomAdjust)
                // }
                // else {
                //     // 'iphone 6 6s, 需要额外减去键盘高度432(见下图), 还算有良心, 高度和原生保持一致')
                //     let bottomAdjust = (Height - window.innerHeight - 88 - 432 + 38) + 'px'
                //     $footer.css('bottom', bottomAdjust)
                // }
            }).blur(function(){
                $footer.css('position','absolute');
                // $tipInfo.text('').parent().parent().hide()
            })
            // android, 键盘弹起/收回会触发resize事件
            // window.onresize = function () {
            //     alert('Height:'+Height+';innerHeight'+window.innerHeight)
            //     // Height: 键盘没有弹出时window.innerHeight
            //     if (Height == window.innerHeight) {
            //         $footer.css({'top': window.innerHeight + 'px','bottom':'initial'})
            //     }
            // }
        </script>
    </body>
</html>